@import '../../../assets/tailwind.css';

.stat_block {
    @apply relative flex w-full items-center rounded-xl shadow-lg;
    /* @apply col-span-3 md:col-span-2 lg:col-span-6; */
    @apply p-8;

    & > .status_bar {
        @apply absolute top-0 left-0 h-full w-1 rounded-l sm:hidden;
    }

    & > .icon {
        @apply hidden h-12 w-12 shrink-0 items-center justify-center rounded-lg shadow-md;
        @apply transition-colors duration-500;
        @apply sm:mr-4 sm:flex;

        & > svg {
            @apply m-auto h-6 w-6;
        }
    }
}

.terminal {
    @apply relative flex h-full w-full flex-col;

    & > .terminalContainer {
        @apply h-full min-h-[453px] rounded-t-xl border-x-[1px] border-t-[1px] border-[#ffffff11] bg-[#131313] pt-8 pl-8 font-mono text-sm;

        & #terminal {
            @apply h-full w-full;

            &::-webkit-scrollbar-track {
                @apply w-2;
            }

            &::-webkit-scrollbar-thumb {
                @apply bg-zinc-900;
            }
        }
    }

    & .command_icon {
        @apply absolute top-0 left-0 z-10 flex h-full items-center px-3 transition-colors duration-100 select-none;
    }

    & .command_input {
        @apply relative w-full rounded-b-xl border-x-[1px] border-b-[1px] border-[#ffffff11] bg-[#131313] px-4 pt-2 pr-4 pb-6 pl-8 font-mono text-sm text-zinc-100;
        @apply outline-hidden focus:ring-0 focus-visible:outline-none;
        @apply focus:border-b-blue-500 active:border-b-blue-500;
    }
}

.chart_container {
    @apply relative rounded-xl border-[1px] border-[#ffffff11] bg-[#131313];
}
